<script setup lang="ts">
import { computed } from 'vue';

import { cn } from '@vben/utils';

import { UserOutlined } from '@ant-design/icons-vue';
import { Avatar } from 'ant-design-vue';

interface AssistantCardAvatarProps {
  class?: string;
  size?: 'default' | 'large' | 'small' | number;
  src?: string;
  icon?: any;
  shape?: 'circle' | 'square';
}

defineOptions({ name: 'AssistantCardAvatar' });
const props = withDefaults(defineProps<AssistantCardAvatarProps>(), {
  size: 36,
  shape: 'circle',
});

const avatarClass = computed(() => cn('shrink-0', props.class));
</script>

<template>
  <Avatar
    :class="avatarClass"
    :size="props.size"
    :src="props.src"
    :shape="props.shape"
  >
    <template #icon v-if="props.icon">
      <component :is="props.icon" />
    </template>
    <template #icon v-else-if="!props.src">
      <UserOutlined />
    </template>
  </Avatar>
</template>

<style scoped lang="less">
:deep(.ant-avatar) {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
</style>
